import React, { useState } from 'react';
import Title from '@/pages/component/Title';
import { Checkbox, Carousel, Row, Col } from 'antd';

const contentStyle = {
  height: '160px',
  color: '#fff',
  lineHeight: '160px',
  textAlign: 'center',
  background: '#364d79',
};






// 版位
export default function slot(props: any) {
  const [checkVal, setcheckVal] = useState<string[]>([]);
  // 选择
  function onChange(event: any) {
    setcheckVal(event);
  }

  return (
    <div>
      <Title tit="版位"></Title>
      <Row>
        <Col span={8}>
          <Checkbox.Group onChange={onChange} value={checkVal}>
            <div className="f fac" style={{ padding: '10px', border: '1px solid #999',marginBottom:"20px" }}>
              <Checkbox value="A"></Checkbox>
              <div style={{ padding: '0 40px' }}>
                <p>车载屏</p>
                <p>这是一个解释文档</p>
              </div>
            </div>
            <div className="f fac" style={{ padding: '10px', border: '1px solid #999' }}>
              <Checkbox value="b"></Checkbox>
              <div>
                <p>车载屏</p>
                <p>这是一个解释文档</p>
              </div>
            </div>
          </Checkbox.Group>
        </Col>
        <Col span={16}>
          <Carousel afterChange={onChange}>
            <div>
              <h3 className="contentStyle">1</h3>
            </div>
            <div>
              <h3 className="contentStyle">2</h3>
            </div>
            <div>
              <h3 className="contentStyle">3</h3>
            </div>
            <div>
              <h3 className="contentStyle">4</h3>
            </div>
          </Carousel>
        </Col>
      </Row>
    </div>
  );
}
